<template>
  <div class="user-container">
    <van-nav-bar title="会员中心" class="page-nav-bar" fixed >
      <span slot="left" class="level">{{ token ? memberLevelId+'级会员':'会员等级'}}</span>
      <van-icon slot="right"  size="22" name="setting-o" />
    </van-nav-bar>
    <div class="user-desc">
        <van-image
          width="80"
          height="80"
          src=""
          round
          error-icon="manager-o"
        />
        <p v-if="token">{{username}}</p>
        <p v-else @click="$router.push('/login')">请登录</p>
    </div>
    <van-cell-group  class="grid-item"  inset>
      <van-cell title="全部订单" to="/order?status=-1" is-link></van-cell>
      <van-grid>
        <van-grid-item icon="photo-o" clickable  to="/order?status=0" text="待付款" />
        <van-grid-item icon="photo-o" clickable  to="/order?status=2" text="待收货" />
        <van-grid-item icon="photo-o" clickable  to="/order?status=3" text="待评价" />
        <van-grid-item icon="photo-o" clickable  text="售后服务" />
      </van-grid>
    </van-cell-group>  
    <van-cell-group  class="grid-item" inset>
      <van-grid>  
        <van-grid-item icon="photo-o" to="/collect" text="我的收藏" />
        <van-grid-item icon="photo-o"  to="/brand/user" text="关注品牌" />
        <van-grid-item icon="photo-o" text="商品" />
        <van-grid-item icon="photo-o" text="专题" />
      </van-grid>
    </van-cell-group> 

    <van-cell-group  class="grid-item" inset>
      <van-cell title="我的足迹" icon="todo-list-o" to="/footprint" is-link></van-cell>
      <van-cell title="我的评价" icon="envelop-o" is-link></van-cell>   
      <van-cell title="地址管理" to="/address" icon="location-o" is-link></van-cell>
    </van-cell-group>   

    <van-cell-group  class="grid-item"  inset>
      <van-cell title="我的会员" icon="concat" is-link></van-cell>
      <van-cell title="服务中心" icon="shield-o" is-link></van-cell>
      <van-cell title="系统设置" icon="setting-o" is-link></van-cell>
    </van-cell-group>   
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  name:'My',
  computed: {
    ...mapGetters(['token','username','memberLevelId'])
  },
  created () {
    if(this.token)  this.getUserInfo()
  },
  methods: {
    ...mapActions('user',['getUserInfo'])
  },
}
</script>

<style lang="less" scoped>
.user-container{
  background-color: #f3f3f3;
  overflow: hidden;
  padding-top: 92px;
  .level{
    color: #fff;
  }
  .user-desc{
    display: flex;
    align-items:center;
    flex-direction: column;
    padding: 30px 0;
    p{
      margin-top: 10px;
      color: #666;
      font-size: 32px;
    }
  }
  .grid-item{
    margin-bottom: 20px;
  }
}
</style>